<%@ page import="kioscodeal.Pedido" %>
<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'pedido.label', default: 'Pedido')}" />
		<title><g:message code="default.show.label" args="[entityName]" /></title>
	    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	    <meta charset="utf-8">
	    <style>
	      html, body, #map-canvas {
	        height: 300px;
	        margin: 0px;
	        padding: 0px
	      }
	    </style>
	    <script type="text/javascript"
	      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrJQbURcgQjdSJzONfJ2PRCLqWRgZS7ss&sensor=false">
	    </script>
	    	
	    <script>
			var map;
			function initialize() {

			  	var mapOptions = {
			    zoom: 16,
				center: new google.maps.LatLng(${pedidoInstance.coord.lat},${pedidoInstance.coord.lng})
			  	};
			  	
			  	map = new google.maps.Map(document.getElementById('map-canvas'),
			      mapOptions);
			  	var directionsDisplay = new google.maps.DirectionsRenderer();
			  	var directionsService = new google.maps.DirectionsService();
			  	
				var request = {
						 origin:new google.maps.LatLng(${pedidoInstance.origen.lat},${pedidoInstance.origen.lng}),
						 destination: new google.maps.LatLng(${pedidoInstance.coord.lat},${pedidoInstance.coord.lng}),
						 travelMode: google.maps.DirectionsTravelMode['WALKING'],
						 unitSystem: google.maps.DirectionsUnitSystem['METRIC'],
						 provideRouteAlternatives: false
						 };
				 
				directionsService.route(request, function(response, status) {
				    if (status == google.maps.DirectionsStatus.OK) {
				        directionsDisplay.setMap(map);
				        directionsDisplay.setDirections(response);
				    } else {
				            alert("No existen rutas entre ambos puntos");
				    }
				});	
			}
		
			google.maps.event.addDomListener(window, 'load', initialize);
	
	    </script>
   	
	</head>
	<body>
	    <div id="map-canvas"></div>	
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-info">
					<div class="panel-heading">
	                	<div class="row">
	                  		<div class="col-xs-6">
	                    		<i class="fa fa-check fa-5x"></i>
	                  		</div>
		                  	<div class="col-xs-6 text-left">
		                    	<p class="announcement-heading">
		                    		<h1><g:message code="default.show.label" args="[entityName]" /></h1>
		                    	</p>
		                    	<p class="announcement-text">
									<div id="show-pedido" class="content scaffold-show" role="main">
										<g:if test="${flash.message}">
											<div class="message" role="status">${flash.message}</div>
										</g:if>
										<div class="row">
											<ol class="property-list pedido">
																			
												<g:if test="${pedidoInstance?.cliente}">
												<li class="fieldcontain">
													<span id="cliente-label" class="property-label"><g:message code="pedido.cliente.label" default="Cliente: " /></span>
													
														<span class="property-value" aria-labelledby="cliente-label"><g:link controller="user" action="show" id="${pedidoInstance?.cliente?.id}">${pedidoInstance?.cliente?.login}</g:link></span>
													
												</li>
												</g:if>											
						
												<g:if test="${pedidoInstance?.estadoPedido}">
												<li class="fieldcontain">
													<span id="estadoPedido-label" class="property-label"><g:message code="pedido.estadoPedido.label" default="Estado del pedido: " /></span>								
													<span class="property-value" aria-labelledby="estadoPedido-label"><g:fieldValue bean="${pedidoInstance}" field="estadoPedido.value"/></span>								
												</li>
												</g:if>
						
												<g:if test="${pedidoInstance?.calificacionPedido}">
												<li class="fieldcontain">
													<span id="calificacionPedido-label" class="property-label"><g:message code="pedido.calificacionPedido.label" default="Calificación del pedido: " /></span>								
													<span class="property-value" aria-labelledby="calificacionPedido-label"><g:fieldValue bean="${pedidoInstance}" field="calificacionPedido.value"/></span>								
												</li>
												</g:if>

												<g:if test="${pedidoInstance?.comentario}">
												<li class="fieldcontain">
													<span id="comentario-label" class="property-label"><g:message code="pedido.comentario.label" default="Comentario: " /></span>								
													<span class="property-value" aria-labelledby="comentario-label"><g:fieldValue bean="${pedidoInstance}" field="comentario.value"/></span>								
												</li>
												</g:if>												
						
												<g:if test="${pedidoInstance?.productoPedidos}">
												<li class="fieldcontain">
													<span id="productoPedidos-label" class="property-label"><g:message code="pedido.productoPedidos.label" default="Productos pedidos: " /></span>								
<%--													<span class="property-value" aria-labelledby="productoPedidos-label"><g:link controller="productoPedido" action="show" id="${pedidoInstance?.productoPedidos?.id}">${pedidoInstance?.productoPedidos?.encodeAsHTML()}</g:link></span>								--%>
													<ul>
														<g:each status="cantidad" var="producto" in="${pedidoInstance?.productoPedidos?.producto}">
													    	<li>Producto: ${producto.titulo}</li>
											   				<li>Cantidad: ${cantidad+1}</li>
														</g:each>	
													</ul>
												</li>
												</g:if>
						
												<g:if test="${pedidoInstance?.importeTotal}">
												<li class="fieldcontain">
													<span id="importeTotal-label" class="property-label"><g:message code="pedido.importeTotal.label" default="Importe Total: " /></span>								
													<span class="property-value" aria-labelledby="importeTotal-label"><g:fieldValue bean="${pedidoInstance}" field="importeTotal"/></span>								
												</li>
												</g:if>
						
												<g:if test="${pedidoInstance?.distanciaComercioCliente}">
												<li class="fieldcontain">
													<span id="distanciaComercioCliente-label" class="property-label"><g:message code="pedido.distanciaComercioCliente.label" default="Distancia Comercio-Cliente: " /></span>								
													<span class="property-value" aria-labelledby="distanciaComercioCliente-label"><g:fieldValue bean="${pedidoInstance}" field="distanciaComercioCliente"/></span>								
												</li>
												</g:if>
						
												<g:if test="${pedidoInstance?.fechaCreacion}">
												<li class="fieldcontain">
													<span id="fechaCreacion-label" class="property-label"><g:message code="pedido.fechaCreacion.label" default="Fecha Creación: " /></span>								
													<span class="property-value" aria-labelledby="fechaCreacion-label"><g:formatDate format="dd-MM-yyyy" date="${pedidoInstance?.fechaCreacion}" /></span>								
												</li>
												</g:if>
						
												<g:if test="${pedidoInstance?.fechaDespacho}">
												<li class="fieldcontain">
													<span id="fechaDespacho-label" class="property-label"><g:message code="pedido.fechaDespacho.label" default="Fecha Despacho: " /></span>								
													<span class="property-value" aria-labelledby="fechaDespacho-label"><g:formatDate format="dd-MM-yyyy" date="${pedidoInstance?.fechaDespacho}" /></span>								
												</li>
												</g:if>						
											</ol>
										</div>
										<g:form url="[resource:pedidoInstance, action:'delete']" method="DELETE">
											<fieldset class="buttons">
												<g:link class="edit" action="edit" resource="${pedidoInstance}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
												<g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
																				
											</fieldset>
										</g:form>
									</div>
									</p>
			                  	</div>
				            	</div>
				            </div>
					     	<div class="panel-footer announcement-bottom">
				               	<div class="row">
				               		<div class="nav" role="navigation">
				               			<div class="row">
									<div class="col-lg-3">
									</div>
									<div class="col-lg-2">
										<a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a>
									</div>
									<div class="col-lg-2">							
										<g:link class="list" action="index"><g:message code="default.list.label" args="[entityName]" /></g:link>
									</div>
									<div class="col-lg-2">
										<g:link class="create" action="compra"><g:message code="default.new.label" args="[entityName]" /></g:link>
									</div>
									<div class="col-lg-3">
									</div>
								</div>					
							</div>
		            	</div>
	            	</div>       
	        	</div>
	    	</div>
		</div>
	</body>
</html>
